<script setup lang="ts">
import Tip2FA from '~comp-b/auth/2fa/Tip2FA.vue';
import { CloseBtn } from '~/components/card';
import WithdrawLive from '~/pages/index/components/WithdrawLive.vue';
import Tabs, { getPcTabs } from './Comps/Tabs.vue';
import Deposit from './Deposit/index.vue';
import { DEF_TAB_KEY, type WalletProps } from './PcWallet.vue';
import Withdraw from './Withdraw/index.vue';

const props = withDefaults(defineProps<WalletProps>(), { initTab: DEF_TAB_KEY });

const { verified } = storeToRefs(useUserStore());

const getTabsRef = computed(() => getPcTabs().map(x => ({ ...x, className: '!rounded-full !bg-sys-layer-d !py-2.5' })));

const getDefActiveTab = computed(() => {
  const _key = props.initTab || DEF_TAB_KEY;
  return getTabsRef.value.find(x => !x.disabled && x.key === _key);
});

const activeTab = ref(getDefActiveTab.value);

if (props.isDepositPage) {
  activeTab.value = getTabsRef.value.find(x => !x.disabled && x.key === 'deposit');
}

const tip2FADomRef = ref();
const getHeightStyleRef = computed(() => {
  const domH = tip2FADomRef.value?.$el?.offsetHeight ?? 63;
  const hv = domH + 24;
  return { height: verified.value?.authenticator ? `var(--dfvh)` : `calc(var(--dfvh) - ${hv}px)` };
});
</script>

<template>
  <div
    class="pointer-events-auto relative w-full flex flex-col gap-3 rounded-t-lg p-3 !bg-sys-layer-c"
    :style="getHeightStyleRef"
  >
    <Tip2FA
      ref="tip2FADomRef"
      class="absolute left-3 right-3 -order-1 -transform-translate-y-135%"
      @open="props.onClose?.()"
    />
    <div class="flex-between">
      <div class="text-lg font-semibold">
        {{ $t('qJaOFvSHkapUsSa7qb0s') }}
      </div>
      <CloseBtn @click=" props.onClose?.()" />
    </div>

    <WithdrawLive class="-mx-3" />

    <Tabs v-model:active="activeTab" class="!grid-cols-2 !gap-3" :list="getTabsRef" />

    <div class="flex-1 lt-mobile:(h-full overflow-y-auto)">
      <Deposit v-if="activeTab?.key === 'deposit'" :depositReadyQry="readyAllQry?.depositReadyQry" :checkedBonusKey="checkedBonusKey" />
      <Withdraw v-else-if="activeTab?.key === 'withdraw'" :withdrawReadyQry="readyAllQry?.withdrawReadyQry" />
    </div>
  </div>
</template>
